@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: "仿宋";
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.page {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.page1 {
    background: #CCBA99;
    -webkit-animation: hue 10s linear infinite;
    animation: hue 10s linear infinite;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    .biao_ti {
        width: r(200);
        height: r(100);
        margin: 0 auto;
        line-height: r(100);
        margin-top: r(63);
        margin-bottom: r(50);
        border: r(1) solid white;
    }
    @-webkit-keyframes hue {
        0% {
            -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
            opacity: 1;
        }
        50% {
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
            opacity: 0.8;
        }
        100% {
            -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
            opacity: 1;
        }
    }
    @keyframes hue {
        0% {
            -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
            opacity: 1;
        }
        50% {
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
            opacity: 0.8;
        }
        100% {
            -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
            opacity: 1;
        }
    }
    .music {
        position: fixed;
        right: r(40);
        top: r(200);
        width: r(10);
        height: r(10);
        border: 0;
        outline: none;
        z-index: 3;
        text-align: center;
        a {
            position: fixed;
            top: r(250);
            right: r(0);
            z-index: 1;
            color: orangered;
            font-size: r(28);
        }
        audio {
            appearance: none;
        }
    }
    >p {
        font-size: r(27);
        line-height: r(56);
        color: rgb(129, 85, 27);
        font-weight: bold;
    }
    .kuang {
        position: relative;
        width: r(570);
        height: r(527);
        background: #ccba99;
        display: block;
        margin: 0 auto;
        margin-top: r(30);
        -moz-opacity: 0.8;
        opacity: 0.8;
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 9px;
        box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 9px;
        .bg-tp {
            position: absolute;
            top: r(23);
            left: r(23);
            display: block;
            width: r(524);
            height: r(481);
            background: url(../img/timg2.jpg) no-repeat;
            background-size: r(524) r(481);
            //          opacity: 0.6;
            margin: 0 auto;
            -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 9px;
            box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 9px;
            span {
                position: absolute;
                top: r(60);
                left: r(60);
                display: block;
                font-size: r(45);
                font-weight: bold;
                -webkit-animation: span 5s;
                animation: span 5s;
            }
            @-webkit-keyframes span {
                0%,
                60%,
                75%,
                90%,
                100% {
                    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(-3000px, 0, 0);
                    transform: translate3d(-3000px, 0, 0);
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(25px, 0, 0);
                    transform: translate3d(25px, 0, 0);
                }
                75% {
                    -webkit-transform: translate3d(-10px, 0, 0);
                    transform: translate3d(-10px, 0, 0);
                }
                90% {
                    -webkit-transform: translate3d(5px, 0, 0);
                    transform: translate3d(5px, 0, 0);
                }
                100% {
                    -webkit-transform: none;
                    transform: none;
                }
            }
            @keyframes span {
                0%,
                60%,
                75%,
                90%,
                100% {
                    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(-3000px, 0, 0);
                    transform: translate3d(-3000px, 0, 0);
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(25px, 0, 0);
                    transform: translate3d(25px, 0, 0);
                }
                75% {
                    -webkit-transform: translate3d(-10px, 0, 0);
                    transform: translate3d(-10px, 0, 0);
                }
                90% {
                    -webkit-transform: translate3d(5px, 0, 0);
                    transform: translate3d(5px, 0, 0);
                }
                100% {
                    -webkit-transform: none;
                    transform: none;
                }
            }
            p {
                color: black;
                position: absolute;
                top: r(120);
                left: r(150);
                display: block;
                font-size: r(45);
                font-weight: bold;
                letter-spacing: r(16);
                line-height: r(72);
            }
        }
    }
}

.page2 {
    //  background: green;
}

.page3 {
    //  background: red;
}

.h1 {
    -webkit-transition: 2s;
    transition: 2s;
    -webkit-animation: h1 400ms;
    animation: h1 400ms;
    font-size: r(34);
}

@-webkit-keyframes h1 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
    55% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60%,
    65% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    68% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
        70%,
        85%,
        100% {
            opacity: 1;
        }
        75%,
        95% {
            opacity: 0;
        }
}

@keyframes h1 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
    55% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60%,
    65% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    68% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
        70%,
        85%,
        100% {
            opacity: 1;
        }
        75%,
        95% {
            opacity: 0;
        }
}

.biao_ti:after {
    content: "";
    position: absolute;
    width: r(100);
    height: r(200);
    border: r(1) solid white;
    left: r(325);
    top: r(8);
    -webkit-animation: rotate 400ms infinite;
    animation: rotate 400ms infinite;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.line {
    position: absolute;
    top: r(496);
    left: r(14);
    width: r(5);
    height: r(800);
    background: white;
}

.line2 {
    position: absolute;
    top: r(496);
    right: r(14);
    width: r(5);
    height: r(800);
    background: white;
}

.left {
    p {
        letter-spacing: r(5);
        writing-mode: tb;
        -ms-writing-mode: tb;
        position: absolute;
        top: r(496);
        left: r(24);
        z-index: 2;
    }
}

.right {
    p {
        letter-spacing: r(5);
        writing-mode: tb;
        -ms-writing-mode: tb;
        position: absolute;
        top: r(496);
        right: r(24);
        z-index: 2;
    }
}

.borderBox {
    width: 77%;
    height: 100%;
    margin: 0 auto;
    #gif {
        width: r(580);
        height: r(280);
        position: absolute;
        bottom: r(0);
        img {
            width: 100%;
            height: 100%;
        }
    }
}

.two-page {
    width: r(620);
    height: r(752);
    margin: 0 auto;
    //  animation: picture 10s;
    img {
        width: 100%;
        height: 100%;
    }
    //  @keyframes picture{
    //      0%{
    //          transform: translateY(-100%);
    //      }
    //      100%{
    //          transform: translateY(100%);
    //      }
    //  }
}

.page2 {
    h1 {
        color: chocolate;
    }
    .two-tp {
        width: r(467);
        height: r(467);
        margin: 0 auto;
        margin-top: r(15);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .p5 {
        position: absolute;
        bottom: r(80);
        left: r(50);
        writing-mode: tb;
        color: chocolate;
        font-weight: bold;
        transform: rotate(15deg);
        animation-name: p5;
        @-webkit-keyframes p5 {
            0% {
                opacity: 0;
                -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
                -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            }
            60% {
                opacity: 1;
                -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
                -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            }
            62%,
            81%,
            100% {
                opacity: 1;
            }
            71%,
            91% {
                opacity: 0;
            }
        }
        @keyframes p5 {
            0% {
                opacity: 0;
                -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
                -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            }
            60% {
                opacity: 1;
                -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
                -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            }
            62%,
            81%,
            100% {
                opacity: 1;
            }
            71%,
            91% {
                opacity: 0;
            }
        }
    }
    .p6 {
        position: absolute;
        bottom: r(80);
        right: r(50);
        transform: rotate(-15deg);
        writing-mode: tb;
        color: chocolate;
        font-weight: bold;
        transform: rotate(-15deg);
        animation-name: p6;
        @-webkit-keyframes p6 {
            0% {
                opacity: 0;
                -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
                -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            }
            60% {
                opacity: 1;
                -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
                -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            }
            62%,
            81%,
            100% {
                opacity: 1;
            }
            71%,
            91% {
                opacity: 0;
            }
        }
    }
    .two-p {
        position: absolute;
        top: r(100);
        left: r(100);
        z-index: 5;
        >p {
            font-weight: bolder;
            text-align: left;
            line-height: r(80);
            color: #FF4500;
        }
        .p1 {
            animation: p1 20s;
            animation-delay: 2s;
            @keyframes p1 {
                0% {
                    opacity: 0;
                }
                50% {
                    opacity: 1;
                }
            }
            @-webkit-keyframes p1 {
                0% {
                    opacity: 0;
                }
                50% {
                    opacity: 1;
                }
            }
        }
        .p2 {
            animation: p2 120s;
//          animation-delay: 4s;
            @keyframes p2 {
                0% {
                    opacity: 0;
                }
                20% {
                    opacity: 1;
                }
            }
            @-webkit-keyframes p2 {
                0% {
                    opacity: 0;
                }
                20% {
                    opacity: 1;
                }
            }
        }
        .p3 {
            animation: p3 380s;
//          animation-delay: 6s;
            @keyframes p3 {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
            }
            @-webkit-keyframes p3 {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
            }
        }
        .p4 {
            animation: p4 580s;
//          animation-delay: 8s;
            @keyframes p4 {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
            }
            @-webkit-keyframes p4 {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
            }
        }
    }
}

.page3 {
    h1 {
        color: chocolate;
        animation-name: h1-3;
        @keyframes h1-3 {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
                visibility: visible;
            }
            50% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            60% {
                -webkit-transform-origin: center;
                transform-origin: center;
                -webkit-transform: rotate3d(0, 0, 1, -200deg);
                transform: rotate3d(0, 0, 1, -200deg);
                opacity: 0.7;
            }
            80% {
                -webkit-transform-origin: center;
                transform-origin: center;
                -webkit-transform: none;
                transform: none;
                opacity: 1;
            }
            82%,
            92%,
            98% {
                opacity: 1;
            }
            85%,
            95%,
            100% {
                opacity: 0;
            }
        }
    }
    .feng_che {
        width: 100%;
        img {
            width: 100%;
        }
        .img-fc {
            position: absolute;
            right: r(60);
            top: r(600);
            width: r(106);
            height: r(102);
            animation: fengche 1s infinite;
            @-webkit-keyframes fengche {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        }
    }
    p {
        font-weight: bold;
        position: absolute;
        color: chocolate;
    }
    .p7 {
        top: r(150);
        left: r(280);
    }
    .p8 {
        position: absolute;
        top: r(380);
        right: r(20);
    }
    .p9 {
        position: absolute;
        top: r(500);
        right: r(80);
    }
    .p10 {
        position: absolute;
        top: r(840);
        right: r(20);
    }
    .p11 {
        position: absolute;
        top: r(940);
        right: r(20);
    }
    .p12 {
        position: absolute;
        top: r(1080);
        right: r(180);
    }
    .divbox {
        position: absolute;
        left: r(35);
        bottom: 0;
        width: 90%;
        height: r(200);
        text-align: center;
        background: white;
        border: r(2) solid #D2691E;
        border-radius: r(50);
    }
        .p13 {
            position: absolute;
            bottom: 0;
            font-size: r(38);
            width: 90%;
            margin: 0 auto;
            line-height: r(200);
            padding-left: r(20);
            opacity: 0;
            animation-name: p13;
            @keyframes p13 {
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -2000px, 0);
                    transform: translate3d(0, -2000px, 0);
                }
                100% {
                    opacity: 1;
                    -webkit-transform: none;
                    transform: none;
                }
            }
        }
}